<template>
  <div class="baseform_container">
    <el-form
      ref="form"
      :model="form"
      :inline="inline || false"
      :size="size"
      :label-width="labelWidth || '100px'"
    >
      <el-form-item>
        <slot name="topbtn"></slot>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in fromIems"
        :key="index"
        :label="item.label + '：'"
        :prop="item.dataIndex"
        :rules="item.rules || []"
        v-if="!item.hide || !item.hide(form)"
      >
        <!-- 普通输入 -->
        <template v-if="item.valueType === 'input'">
          <el-input
            v-model="form[item.dataIndex]"
            :style="item.props ? item.props.style : { width: '220px' }"
            :disabled="item.props ? item.props.disabled : false"
            :placeholder="item.props ? item.props.placeholder : '请输入'"
            :type="item.type || 'text'"
            :suffix-icon="item.props ? item.props.icon : ''"
          ></el-input>
        </template>

        <!-- 下拉 -->
        <template v-if="item.valueType === 'select'">
          <el-select
            v-model="form[item.dataIndex]"
            :value-key="item.props ? item.props.valueKey : ''"
            :style="item.props ? item.props.style : { width: '220px' }"
            :placeholder="
              item.props ? item.props.placeholder : $t('common.select')
            "
            :clearable="item.props ? item.props.clearable : true"
            :multiple="item.props ? item.props.multiple : false"
            :filterable="item.search ? item.search : false"
            :remote="item.search ? item.search : false"
            :remote-method="item.searchFn"
            @change="item.onChange && item.onChange(form[item.dataIndex])"
            @clear="item.searchFn && item.searchFn('')"
          >
            <el-option
              v-for="el in item.options"
              :key="el.value"
              :label="el.label"
              :value="el.value"
            >
            </el-option>
          </el-select>
        </template>

        <!-- 数字 -->
        <template v-if="item.valueType === 'inputNumber'">
          <el-input-number
            v-model="form[item.dataIndex]"
            controls-position="right"
            :min="item.props ? item.props.min : 0"
            :max="item.props ? item.props.max : 9999"
            :style="item.props ? item.props.style : { width: '220px' }"
          ></el-input-number>
        </template>

        <!-- 开关 -->
        <template v-if="item.valueType === 'switch'">
          <el-switch
            v-model="form[item.dataIndex]"
            :active-text="item.props ? item.props.activeText : '启用'"
            :inactive-text="item.props ? item.props.inactiveText : '禁用'"
            @change="item.onChange && item.onChange(form[item.dataIndex])"
          >
          </el-switch>
        </template>

        <!-- 日期 -->
        <template v-if="item.valueType === 'date'">
          <el-date-picker
            v-model="form[item.dataIndex]"
            :type="item.props ? item.props.type : 'date'"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>

        <!-- 单选 -->
        <template v-if="item.valueType === 'radio'">
          <el-radio-group v-model="form[item.dataIndex]">
            <el-radio
              v-for="(el, index) in item.options"
              :label="el.value"
              :key="index"
              >{{ el.label }}</el-radio
            >
          </el-radio-group>
        </template>

        <!-- 多选 -->
        <template v-if="item.valueType === 'checkbox'">
          <el-checkbox-group v-model="form[item.dataIndex]">
            <el-checkbox
              v-for="(el, index) in item.options"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </template>

        <!-- 联级 -->
        <template v-if="item.valueType === 'cascader'">
          <el-cascader
            v-model="form[item.dataIndex]"
            :options="item.options"
            @change="item.onChange"
          ></el-cascader>
        </template>

        <!-- 上传图片 -->
        <template v-if="item.valueType === 'img'">
          <div class="avatar-uploader">
            <el-upload
              action="/"
              :show-file-list="false"
              :limit="item.limit || 1"
              :before-upload="item.uplaod"
              :accept="
                item.accept ||
                'image/png, image/jpeg,image/png,image/webp,image/svg,image/webp'
              "
            >
              <el-image
                style="width: 100px; height: 100px"
                v-if="item.defaultValue"
                :src="item.defaultValue"
                class="avatar"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </template>

        <!-- slot -->
        <slot :name="item.slotName"> </slot>
      </el-form-item>

      <el-form-item>
        <!-- <el-button type="primary" @click="handleSubmit">立即创建</el-button>
          <el-button>取消</el-button> -->
        <slot></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "baseFrom",
  props: ["fromIems", "inline", "size", "labelWidth", "addApi", "editApi"],
  data() {
    return {
      form: {},
    };
  },
  watch: {
    fromIems: {
      immediate: true,
      deep: true,
      handler(v) {
        v.forEach((item) => {
          // 有默认值的设置默认值
          if (item.defaultValue) {
            // 此处加一个定时器延迟一下 因为外面会重置在这前面
            setTimeout(() => {
              console.log(item.dataIndex, item.defaultValue, "---------------");
              this.$set(this.form, item.dataIndex, item.defaultValue);
            }, 100);
            console.log(this.form, "表单变化");
          }
        });
      },
    },
  },

  methods: {
    submit() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form, " add-------submit!!");
          this.$emit("submit", this.form);
        } else {
          console.log("error submit!!");
          Message.error("请填写完必填项目");

          return false;
        }
      });
    },
    edit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form, "edit----------- submit!!");
          this.$emit("edit", this.form);
        } else {
          console.log("error submit!!");
          Message.error("请填写完必填项目");
          return false;
        }
      });
    },
    rest() {
      this.$refs["form"].resetFields();
    },
    clear() {},
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
